<template>
  <div style="height: 100%" class="f-c">
    <div class="firstLine f-r a-c">
      <div class="finished pa-mr-1"></div>
      <div class="finishedText pa-mr-1">已完成</div>
      <div class="inProgress pa-mr-1"></div>
      <div class="processText pa-mr-1">进行中</div>
      <div class="notFinish pa-mr-1"></div>
      <div class="notText">未完成</div>
    </div>
    <div class="project-canvas-page f-g">
      <div class="canvas">
        <div :id="domId" class="full" />
      </div>
    </div>
  </div>
</template>

<script>
function createRandomId() {
  return (
    (Math.random() * 10000000).toString(16).substr(0, 4) +
    "-" +
    new Date().getTime() +
    "-" +
    Math.random()
      .toString()
      .substr(2, 5)
  );
}
import { Topology } from "@topology/core";
import { http_project_process } from "@/api";
// 配置项
const canvasOptions = {
  lineName: "line",
  minScale: 0,
  maxScale: 50,
  // 连线颜色
  font: {
    color: "#fff",
    fontSize: 12
  },
  // 键盘事件 如 删除 移动
  keydown: -1,
  // 缩放 如 ctrl + mousewheel 缩放
  disableScale: true,
  // 移动 如 ctrl + mouse 移动
  disableTranslate: true,
  disableEmptyLine: false,
  autoAnchor: false,
  // autoExpandDistance: 0,
  cacheLen: 0,
  anchorFillStyleL: "#1976d2",
  dockFillStyle: "#1976d2",
  hideInput: false
};

export default {
  name: "ProjectCanvas",
  props: {
    projectId: String
  },
  data() {
    return {
      domId: createRandomId(),
      canvas: null,
      productList: []
    };
  },
  mounted() {
    this.initCanvas();
  },
  beforeDestroy() {
    /**
     *  销毁画布
     */
    this.canvas.destroy();
    this.canvas = null;
    document.onclick = null;
  },
  methods: {
    initCanvas() {
      this.canvas = null;
      canvasOptions.on = this.onMessage;
      this.canvas = new Topology(this.domId, canvasOptions);
      setTimeout(() => {
        // 修复鼠标框选错位
        this.canvas.data.lineName = "polyline";
        this.canvas.data.toArrow = "";
      }, 1000);
      http_project_process
        .read({
          projectId: this.$route.query.id
        })
        .then(res => {
          if (res.data.canvas) {
            const productList = res.data.productList;
            this.productList = res.data.productList;
            this.canvas.open(res.data.canvas);
            setTimeout(() => {
              this.canvas.canvasPos = this.canvas.divLayer.canvas.getBoundingClientRect();
              // this.canvas.fitView()
              this.canvas.data.pens.forEach(el => {
                el.strokeStyle = "#1976d2";
              });
              this.canvas.data.pens.forEach(pen => {
                if (pen.data) {
                  if (pen.data.type === "node") {
                    const find = productList.find(
                      p => p.productCode === pen.data.productCode
                    );
                    if (find) {
                      pen.font.textAlign = "left";
                      pen.text =
                        find.productName +
                        "\n" +
                        "开始时间：" +
                        (find.startTime || "") +
                        "\n" +
                        "结束时间：" +
                        (find.endTime || "");

                      const color = this.getStatusColor(find.status);
                      pen.fillStyle = color[1]; // 内部颜色
                      pen.strokeStyle = color[0]; // 边框颜色
                      pen.font.color = color[0]; // 字体颜色

                      // 设置连线颜色
                      const lines = this.canvas.data.pens.filter(
                        _pen => _pen.type === 1
                      );
                      for (let i = 0; i < lines.length; i++) {
                        const _line = lines[i];
                        if (_line.to.id === pen.id) {
                          _line.strokeStyle = color[0];
                        }
                      }
                    }
                  }
                }
              });
              this.canvas.lock(10);
              this.canvas.overflow();
              this.canvas.render();
            });
          }
        });
    },
    onMessage(event, data) {
      if (event === "node") {
        if (data && data.type === 0 && data.data.type === "node") {
          // 处理标书
          if (
            data.data.productCode === "B203" ||
            data.data.productCode === "B204"
          ) {
            // this.$router.push({
            //   path: '/build',
            //   query: {
            //     productCode: data.data.productCode
            //   }
            // })
            return;
          }
          const product = this.productList.find(
            el => el.productCode === data.data.productCode
          );
          if (product.status === 1 || product.status === 2) {
            // this.$router.push({
            //   path: '/project-node',
            //   query: {
            //     id: product.id,
            //     intermediaryId: product.intermediaryId,
            //     isIntervene: product.isIntervene, // 0不需要，1需要
            //     projectId: this.$route.query.projectId,
            //     productCode: product.productCode,
            //     status: product.status
            //   }
            // })
          } else if (product.status === 0) {
            // this.$router.push({
            //   path: '/project-node-detail',
            //   query: {
            //     id: product.id,
            //     intermediaryId: product.intermediaryId,
            //     isIntervene: product.isIntervene, // 0不需要，1需要
            //     projectId: this.$route.query.projectId,
            //     productCode: product.productCode,
            //     status: product.status
            //   }
            // })
          }
        }
      }
    },
    // 0未完成 1进行中 2已完成
    getStatusColor(status) {
      if (status === 0) {
        return ["#999999", "#e7e7e7"];
      } else if (status === 1) {
        return ["#ff7940", "#fee2c1"];
      } else if (status === 2) {
        return ["#2f86fd", "#d8e8ff"];
      } else {
        return ["#2f86fd", "#d8e8ff"];
      }
    }
  }
};
</script>

<style scoped lang="scss">
.pa-mr-1 {
  margin-right: 10px;
}
.firstLine {
  margin-left: 50px;
}
.finished {
  width: 34px;
  height: 17px;
  background: #0faa7e;
  border-radius: 5px;
}
.finishedText {
  font-size: 18px;
  font-weight: 500;
  color: #0faa7e;
}
.inProgress {
  width: 34px;
  height: 17px;
  background: #ff7840;
  border-radius: 5px;
}
.processText {
  font-size: 18px;
  font-weight: 500;
  color: #ff7840;
}
.notFinish {
  width: 34px;
  height: 17px;
  border: 1px solid #999999;
  border-radius: 5px;
  background-color: #999999;
}
.notText {
  font-size: 18px;
  font-weight: 500;
  color: #333333;
}
.project-canvas-page {
  padding: 20px;
  .canvas {
    height: 100%;
    padding-bottom: 20px;
    .full {
      width: 100%;
      height: 100%;
      touch-action: none;
    }
  }
  .canvas-content-header {
    height: 47px;
    border-bottom: 1px solid #dddddd;
    .export-icon {
      width: 56px;
      height: 18px;
      background: #2f86fd;
      border-radius: 5px;
      line-height: 18px;
      color: #ffffff;
      font-size: 10px;
      text-align: center;
    }
    .item {
      .icon {
        width: 23px;
        height: 12px;
        border-radius: 6px;
        margin-right: 10px;
      }
      .name {
        font-size: 10px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
      }
      .icon1 {
        background-color: #10aa7f;
      }
      .icon2 {
        background-color: #ff7940;
      }
      .icon3 {
        background-color: #999999;
      }
    }
  }
}
</style>
